import React, {PropsWithChildren, useCallback, useEffect, useState} from 'react'
import {Text, View} from "@tarojs/components";
import styles from "./marketDetail.module.sass"
import {getMarketDetail} from "../apis/MarketsApi"
import Taro, {useLoad} from '@tarojs/taro';
import {Button, Cell} from "@nutui/nutui-react-taro";
import {ArrowRight} from "@nutui/icons-react-taro";
import employeeStore from "../store/EmployeeStore";
import marketPageStackStore from "../store/MarketPageStackStore";
import {observer} from "mobx-react";
import MyNavigationBar from "../components/MyNavigationBar";

export interface MarketDetailProps extends PropsWithChildren {

}

const MarketDetail: React.FC<MarketDetailProps> = ({}) => {
    const [id, setId] = useState<number>()
    useLoad((params) => {
        setId(parseInt(params.id))
    })
    const query = useCallback(() => {
        if (id) {
            getMarketDetail(id).then(response => {

                marketPageStackStore.setDetail(response.data)
            })
        }
    }, [id]);
    useEffect(() => {
        if (marketPageStackStore.detail?.name){
            Taro.setNavigationBarTitle({
                title: marketPageStackStore.detail?.name
            })
        }
    }, [marketPageStackStore.detail?.name]);
    useEffect(() => {
        query()
        return ()=>{
            marketPageStackStore.setDetail(undefined)
        }
    }, [query]);
    let detail = marketPageStackStore.detail;
    return <>
        <MyNavigationBar>{marketPageStackStore.detail?.name??"卖场详情"}</MyNavigationBar>
        {detail && <View className={styles.container}>
            {detail.saleManager && <Cell title={"业务员"} extra={detail.saleManager.name}></Cell>}
            {!!detail.shoppingGuides.length && <Cell title={"导购员"} description={
                detail.shoppingGuides.map(it => it.name).join("、")
            }></Cell>}
            <Cell title={"货品数"} extra={<>
                <Text>{detail.goodsAmount}</Text>
                <ArrowRight className={styles.arrowRight}/>
            </>}></Cell>
            {employeeStore.hasAuthority("卖场_订单_查询")&&<Cell onClick={() => {
                Taro.navigateTo({
                    url: `/pages/marketOrder?marketId=${id}&marketName=${detail!.name}`
                })
            }} title={"订单数"} extra={<>
                <Text>{detail.orderAmount}</Text>
                <ArrowRight className={styles.arrowRight}/>
            </>}></Cell>}
            {employeeStore.hasAuthority("卖场_户头_查询")&&<Cell onClick={() => {
                Taro.navigateTo({
                    url: `/pages/marketAccount?marketId=${id}`
                })
            }} title={"户头"} extra={<>
                <ArrowRight className={styles.arrowRight}/>
            </>}></Cell>}
            {employeeStore.hasAuthority("卖场_修改") && <Button block fill={"outline"} shape={"round"} onClick={()=>{
                Taro.navigateTo({url:`/pages/marketEdit?id=${detail?.id}`})

            }}>编辑</Button>}
        </View>}
    </>
}

export default observer(MarketDetail)


